<template>
<div>
  <common_nav :title="title" backTitle="" :appPathObj="{}" :routerPath="{path: '/user/basic/index'}"></common_nav>
  <div class="operator">
    <el-button type="primary" size="medium"  @click="edit({})">添加业务数据</el-button>
    <div class="query" v-if="page_data.query_field.length > 0">
      <div v-for="(item, k) in page_data.query_field" :key="k">
        <span v-if="item.type=='daterange'">
          {{ item.name }}：<el-date-picker
            size="medium"
            v-model="item.value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>&nbsp;
        </span>
        <span v-if="item.type == 'select'">
          <el-select v-model="item.value" size="medium" :placeholder="'请选择'+item.name" clearable>
              <el-option v-for="(item1, key1) in item.option" :key="key1" :label="item1.name" :value="item1.id"></el-option>
          </el-select>&nbsp;
        </span>
      </div>
      <el-button type="primary" size="medium" @click="getDataList()">查询</el-button>
    </div>
  </div>

  <div class="table_data">
    <el-table :header-cell-style="{ background: '#eef1f6', color: '#909399',fontSize:'14px',fontWeight:'bold' }" v-loading="loading"
        highlight-current-row ref="multipleTable" border class="eltable"
        :data="list" style="width: 100%">
      <div  v-for="(item, k) in field_name" :key="k">
        <div v-if="k == 'status' || k == 'image' || k == 'message' || k == 'audit_role'">
          <el-table-column  :property="k"  :label="item" v-if="k == 'status'" align="center">
            <template slot-scope="scope" >
              <el-switch active-value="1" inactive-value="0" @change="update(scope.row,'status')" v-model="scope.row.status"></el-switch>
            </template>
          </el-table-column>
          <el-table-column  :property="k"  :label="item" v-if="k == 'image'" align="center">
            <template slot-scope="scope" >
            <span v-if="scope.row.image.length > 0">
              <el-image :src="item1.url" v-for="(item1, k1) in scope.row.image" :key="k1" style="width:40px;"></el-image>
            </span>
            </template>
          </el-table-column>
          <el-table-column  :property="k"  :label="item" v-if="k == 'message'" align="center">
            <template slot-scope="scope" >
              <span style="color:#ff0000;">{{scope.row[k]}}</span>
            </template>
          </el-table-column>
          <el-table-column  :property="k"  :label="item" v-if="k == 'audit_role'" align="center">
            <template slot-scope="scope" >
              <span>{{scope.row[k].name}}</span>
            </template>
          </el-table-column>
        </div>
        <div v-else>
          <el-table-column  :property="k"  :label="item" align="center"></el-table-column>
        </div>
      </div>

      <el-table-column label="操作" max-width="180" align="center">
        <template slot-scope="scope">
          <span>
            <el-link type="primary" @click="edit(scope.row)">查看</el-link>&nbsp;
          </span>
          <span>
            <el-link type="primary" @click="edit(scope.row)">编辑</el-link>&nbsp;
          </span>
          <span>
            <el-link type="primary" @click="audit(scope.row)" v-if="scope.row.audit_role.group_id">{{ scope.row.audit_role.name }}</el-link>&nbsp;
          </span>
          <span>
            <el-link type="primary" @click="resetAudit(scope.row)" v-if="scope.row.audit_status > 0">重置审核</el-link>&nbsp;
          </span>
          <span>
            <el-link type="danger" @click="deleteRow(scope.row)">删除</el-link>&nbsp;
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="getDataList" />
  </div>
  <editData :show.sync="dialog.editStatus" :info="dialog.info" :bid="assoc_id" :name="name" @callFn="getDataList"></editData>
  <dialogAuditData :show.sync="dialog.auditStatus" :info="dialog.info" :bid="assoc_id" @callFn="getDataList"></dialogAuditData>

</div>
</template>

<script>
import { getDataList,updateDataExt,deleteData } from '@/api/user/basic'
import { resetAudit } from '@/api/user/app'
import Page from '@/components/common/Page.vue'
import editData from './editData.vue'
import dialogAuditData from './dialogAuditData.vue'

export default {
  name: "basic_index",
  components: {Page, editData, dialogAuditData},
  props: {
    name: {
      type: String,
      default: ''
    },
    assoc_id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialog: {
        editStatus: false,
        auditStatus: false,
        info: {}
      },
      title: "业务-"+this.name,
      loading: false,
      list:[],
      field_name: [],
      page_data: {
        page: 1,
        limit: 10,
        total: 0,
        mid: '',
        business_id: this.assoc_id,
        query_field: []
      }
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    deleteRow(row) {
      this.$confirm('确定删除当前数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteData({id: row.id, business_id: row.business_id}).then(res => {
          if (res.code == 0) {
            this.getDataList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {});
    },
    resetAudit(row) {
      this.$confirm('确定重置审核当前数据，重置后可编辑再重新审核, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetAudit({id: row.id, mid: this.page_data.mid}).then(res => {
          if (res.code == 0) {
            this.getDataList()
            this.$message({
              type: 'success',
              message: '重置成功!'
            });
          }
        })
      }).catch(() => {});
    },
    edit(row) {
      this.dialog.info = row
      this.dialog.editStatus = true
    },
    audit(row){
      this.dialog.info = row
      this.dialog.auditStatus = true
    },
    getDataList() {
      getDataList(this.page_data).then(res => {
        if (res.code == 0) {
          this.page_data.mid = res.data.mid
          this.total = res.data.count
          this.list = res.data.list
          this.page_data.query_field = res.data.query_field
          this.field_name = res.data.field_name
          this.$nextTick(() => { //调用doLayout重新渲染表格
            this.$refs['multipleTable'].doLayout();
          })
        }
      })
    },
    update(row,field) {
      //console.log(row)
      updateDataExt({id:row.id, business_id: row.business_id,field: field,value:row[field]}).then(res=>{
        if (res.code == 0) {
          this.getDataList()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.operator {
  margin: 10px 10px;
  display:flex;
  .query {
    display:flex;
    margin-left: 20px;
    font-size: 14px;
  }
}
</style>